<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map1, #map2 {
            width: 100%;
            height: 282;
            border: 1px solid black;
        }
      
        #zoomLevel {
           bottom: 10px;
           left: 0px;
        }
        #gene {
            background-color: red;
            color:white;
        }
        #mrna {
            background-color: blue;
            color:white;
        }
        #cds {
            background-color: green;
            color:white;
        }
    </style>
    <script src="http://openlayers.org/api/2.7/OpenLayers.js"></script>
    <script src="../javascript/Genomic.js"></script>
    <script src="../javascript/opengenes.js"></script>

    <script type="text/javascript">
    /* ruler, chromosome, cds, rna, gene, protein,
       domain, other, cns, nt, gc, background, */

        <!--
        if(! window.console){ console={}; console.log = console.debug = function(){}}

        var map1, layers, map2;
        var chr = 1;
        var bp;
        var version = 6;
        var size= 285;
// http://synteny.cnr.berkeley.edu/CoGe/tiler.pl?ds=34465&chr=1&version=5&layers=gc&organism=Oryza%20sativa%20japonica%20(Rice)&xmin=11440&xmax=23728&width=768
        var server = ['http://homer.cnr.berkeley.edu/CoGe/tiler.pl?','http://toxic.berkeley.edu/CoGe/tiler.pl?','http://biocon.berkeley.edu/CoGe/tiler.pl?','http://synteny.cnr.berkeley.edu/CoGe/tiler.pl?'];
        var org = "Oryza sativa japonica (Rice)";

        var ds1 = 34465;
        var ds2 = 35159;

        var loc = 500000;
        var zoom = 3;
        function map1move(){ map2.panTo(map1.getCenter()) }

        function init(){
            map1 = new OpenLayers.GenomeBrowser( $('map1') , 
            {   
                 maxExtent: new OpenLayers.Bounds(0,-10000,1000000,10000),
                 units     :'bp',
                 tileSize: new OpenLayers.Size(512, 285),
                 //resolutions:[1024,512,256,128,64,32,16,8,4,2,1],
                 resolutions:[512, 256],
                 controls: [new OpenLayers.Control.MouseDefaults()]
            });

            map2 = new OpenLayers.GenomeBrowser( $('map2') , 
            {   
                 maxExtent: new OpenLayers.Bounds(0,-10000,1000000,10000),
                 units     :'bp',
                 tileSize: new OpenLayers.Size(512, 285),
                 //resolutions:[1024,512,256,128,64,32,16,8,4,2,1],
                 resolutions:[512, 256],
                 controls: []
            });
            layers = [
            new OpenLayers.Layer.Genomic( "Ruler" , server
                 ,{'ds': ds1, 'chr':chr,layers:"background,ruler",'version':version,organism:org}
                 ,{isBaseLayer:true} 
             ),
            new OpenLayers.Layer.Genomic( "<span id='gene'>Genes</span>" , server
                 ,{'ds': ds1, 'chr':chr,layers:"gene,CDS,mRNA",'version':version,organism:org}
                 ,{isBaseLayer:false}
             )
            ]
            layers2 = [
            new OpenLayers.Layer.Genomic( "Ruler" , server
                 ,{'ds': ds2, 'chr':chr,layers:"background,ruler",'version':version,organism:org}
                 ,{isBaseLayer:true} 
             ),
            new OpenLayers.Layer.Genomic( "<span id='gene'>Genes</span>" , server
                 ,{'ds': ds2, 'chr':chr,layers:"gene,CDS,mRNA",'version':version,organism:org}
                 ,{isBaseLayer:false}
             )
            ]
            map1.addControl(new OpenLayers.Control.LayerSwitcher())
            map1.addLayers(layers);
            map2.addLayers(layers2);
            /*                                          zoomLevel */
            map1.setCenter(new OpenLayers.BasePair(loc), zoom);
            map2.setCenter(new OpenLayers.BasePair(loc), zoom);
            bp = new OpenLayers.Control.MousePosition() 
            map1.addControl(bp );
            map1.addControl(new OpenLayers.Control.PanZoomBar());


            map1.events.register('zoomend',map1,updateZoom);
            map1.events.register('move',map1,map1move);
            map1.events.triggerEvent('zoomend');



        }

        function updateZoom(){
            $('resolution').innerHTML = map1.getResolution() + 'bp/pixel';
            map2.zoomTo(map1.getZoom())

        }

        // -->
    </script>
  </head>
  <body onload="init()">
  Drag the top Map.
    <div id="map1">
    </div>
    <div id="map2">
    </div>
    <div id='resolution'></div>
    <div id='query'></div>
  </body>
</html>


